<script setup lang='ts'>
import type { PlusColumn } from 'plus-pro-components'
import { useSortAddOrUpdate, useSortShow } from '@fl/api/advertising-api/flash-management'
import type { sortEditParam } from '@fl/api/advertising-api/model/flash-management-types'
import { SubmitBtn } from '@fl/components'
import { cloneDeep } from 'lodash-es'
import { useCity } from '../hooks/use-city'

const { cityOptions, queryCityList } = useCity()
const visible = defineModel<boolean>('visible', { required: true })
const id = defineModel<string>('id', { required: true })

const formRef = ref()
const title = ref('添加快讯分类')

const initialState = {
    classifyName: '',
    cityCode: '',
    cityName: '',
}
const state = ref<sortEditParam>(cloneDeep(initialState))
queryCityList()
// 详情
const { data: detail, isLoading } = useSortShow(id)
watchEffect(() => {
    if (id.value) {
        title.value = '编辑快讯分类'
    }
    else {
        title.value = '新增快讯分类'
    }
    if (detail.value) {
        state.value = cloneDeep(detail.value)
    }
})

// 提交表单
const { isPending, mutate } = useSortAddOrUpdate()

// 提交
async function submit() {
    const cityItem = cityOptions.value.find((item) => {
        return item.value === state.value.cityCode
    })
    if (cityItem) {
        state.value.cityName = cityItem.label
    }
    const valid = await formRef.value.formInstance.validate()
    if (valid) {
        const params = {
            id: id.value ?? '',
            ...unref(state),
        }
        console.log('params', params)
        mutate(params, {
            onSuccess: () => {
                ElMessage.success('操作成功')
                reset()
            },
        })
    }
}

function cancel() {
    reset()
}

function reset() {
    visible.value = false
    state.value = cloneDeep(initialState)
    formRef.value.formInstance.resetFields()
    id.value = ''
}

const columns: PlusColumn[] = [
    {
        label: '快讯分类',
        fieldProps: {
            maxlength: 10,
        },
        prop: 'classifyName',
    },
    {
        label: '所属城市',
        fieldProps: {
            maxlength: 10,
        },
        prop: 'cityCode',
        options: computed(() => {
            return cityOptions.value
        }),
        valueType: 'select',
    },
]

const rules = {
    classifyName: [
        {
            message: '请输入分类名称',
            required: true,
        },
    ],
}
</script>

<template>
    <PlusDialog v-model="visible"
                :title="title"
                width="500"
                close-on-press-escape
                :has-footer="false"
                @cancel="cancel"
                @closed="reset"
    >
        <ElSkeleton v-if="isLoading"
                    animated
                    class="mt-20"
        />

        <template v-else>
            <div class="mt-20">
                <PlusForm ref="formRef"
                          v-model="state"
                          :columns="columns"
                          :label-width="120"
                          :rules="rules"
                          :has-footer="false"
                          :row-props="{ gutter: 20 }"
                />
            </div>

            <div class="mx-auto mt20 flex justify-center">
                <el-button @click="cancel">
                    取消
                </el-button>

                <SubmitBtn type="primary"
                           :loading="isPending"
                           @click="submit"
                >
                    提交
                </SubmitBtn>
            </div>
        </template>
    </PlusDialog>
</template>

<style lang="scss" scoped>

</style>
